<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 500px;
				border: 5px solid orange;
				font-size: 36px;
				color: black;
				line-height: 200px;
				/* step2:绑定动画
				animation:动画名称 持续时间 次数 速度 延迟
				infinite:无限次
				 /*from: 开始帧
				  to:结束帧
				  百分比：时间节点
				  
				 */
				animation:changge 10s infinite linear 1s;
			}
			/* 动画:
			step1:创建关键帧 @keyframes  动画名称{
				from{}
				to{}
				}
				*/
			
			@keyframes changge {
				0%,15%{width: 300px;
				height: 500px;
				border: 5px solid orange;
				}
				20%,40%{/* 某种状态持续一段时间 */
					transform: rotate(0);
					background-color: aqua;
				/* 开始帧 */ }
				45%,65% {
				width: 800px;  /* 结束帧 */ 
				 transform: rotate(180deg);
				 background-color: pink;
				 }
				 60%{
					 width: 1200px;
					 height: 200px;
					 background-color: blue;
				 }
				 100%{
					 width: 300px;
					 height: 300px;
					 background-color: aquamarine;
					 transform: rotate(360deg);
				 }
			}
			
		</style>
	</head>
	<body>
		<div class="box">这是cp</div>
	</body>
</html>
